function Box(container){
    this.domcont = document.querySelector(container)

    // console.log(this.domcont);
    this.mask = this.domcont.querySelector('.mask')
    this.show = this.domcont.querySelector('.show')
    this.enlarge = this.domcont.querySelector('.enlarge')
    // this.headMask()
    this.moveMask()
    
}

Box.prototype.headMask = function(){
    this.show.addEventListener('mouseover',e => {
        // console.log('123');
        this.mask.style.display = 'block'
        this.enlarge.style.display = 'block'

    })
    this.show.addEventListener('mouseout',e => {
        this.mask.style.display = 'none'
        this.enlarge.style.display = 'none'
    })
}

Box.prototype.moveMask = function(){
    const that = this.mask

    let showWidth = parseFloat(getComputedStyle(this.show).width)
    let showHeight = parseFloat(getComputedStyle(this.show).height)
    let maskWidth = parseFloat(getComputedStyle(this.mask).width)
    let maskHeight = parseFloat(getComputedStyle(this.mask).height)

    this.show.addEventListener('mousemove',e => {
        let X = e.clientX - this.domcont.offsetLeft - maskWidth / 2
        let Y = e.clientY - this.domcont.offsetTop - maskHeight / 2

        if(X < 0){
            X = 0
        }else if(X > showWidth - maskWidth){
            X = showWidth - maskWidth
        }
        if(Y < 0){
            Y = 0
        }else if(Y > showHeight - maskHeight){
            Y = showHeight - maskHeight
        }

        that.style.top = Y + 'px'
        that.style.left = X + 'px'

    })


}

export default Box